<template>
	<div class="myReserve">
	  <PageContainer
	  title="我的预约"
	  :containerStyle="{
			background: '#F5F5F5'
	  }" back no-tab>
		  <div class="order-list">
			<div v-for="(item, index) in list" :key="index" class="order-item" @click="goto(item)">
				<div class="img-container">
					<u-image :showLoading="true" :src="item.url" width="100%" height="192"></u-image>
				</div>
				<div class="order-info">
					<div v-if="item.type === 2" class="title">商品名称：{{ item.dressProjectDO?.name }}</div>
					<div v-else class="title">活动名称：{{ item.erpActivity?.title }}</div>
					<div class="time flex">计划到店时间：<div class="value">{{ item.preTime }}</div></div>
					<div class="style flex">意向试穿风格：<div class="value">{{ item.style }}</div></div>
				</div>
			</div>
			<u-loadmore v-if="!hideLoading" :status="status" />
	  	</div>
	  </PageContainer>
	</div>
  </template>
  
  <script setup>
  import { ref, onMounted, onActivated } from 'vue'
  import PageContainer from '@/components/PageContainer/index.vue'
  import { getUserPreList } from '@/api'
  import {useRouter} from '@/hooks/useRouter';
import { onShow } from '@dcloudio/uni-app';
  
  const list = ref([])
  const router = useRouter();
  const status = ref('loading')
  const hideLoading = ref(false)
  
  const getList = async () => {
	const res = await getUserPreList()
	list.value = res.records || []
	if (list.value.length === 0) {
		status.value = 'nomore'
	} else {
		hideLoading.value = true
	}
  }

  const goto = (item) => {
	router.push({
      path: `/pages/reserveInfo/index?preId=${item.id}&activeId=${item.relateId}`,
    });
}

  onMounted(() => {
	getList()
  })

  onShow(() => {
	getList()
  })
  
  </script>
  
  <style lang="less" scoped>
  .myReserve {
	  .order-list {
	  padding: 8px;
	  .order-item {
		width: 100%;
		padding: 8px;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		flex-direction: column;
		&:not(:last-child) {
		  margin-bottom: 8px;
		}
  
		.order-info {
			.value {
				color: #282828;
			}
		  .title {
				font-size: 16px;
				font-weight: 400;
				color: #282828;
				line-height: 24px;
				margin: 8px 0;
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
		  }

			.flex {
				display: flex;
				align-items: center;
			}
  
		  .time {
				font-size: 14px;
				margin-bottom: 10px;
				color: #939393;
		  }
  
		  .style {
				font-size: 14px;
				color: #939393;
		  }
		}
  
		.img-container {
		  width: 100%;
		  height: 192px;
		  .img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		  }
		}
	  }
	}
  }
  </style>
  